<template>
  <div class="page page-apps-index">
    <div class="px-4">
      <div class="banner" @click="goIllustration">

      </div>
      <div class="appcontainer ">
        <div class="line flex">
          <div class="apps py-2">
            <div class="app" v-for="(app, index) in apps" :key="index"
              :class="[{ active: app.workflowId == activeAppId }]" @click="changeApp(app.workflowId)">


              <div class="pics w-full">
                <div class="image1" :style="{
                  width: '110px',
                  height: '110px',
                  backgroundImage: `url(${app.inputPic})`,
                  backgroundRepeat: 'no-repeat',
                  backgroundPosition: 'center',
                  backgroundSize: 'contain'
                }">
                </div>
                <div class="image2" :style="{
                  width: '110px',
                  height: '110px',
                  backgroundImage: `url(${app.outputPic})`,
                  backgroundRepeat: 'no-repeat',
                  backgroundPosition: 'center',
                  backgroundSize: 'contain'
                }">

                </div>
                <!-- <img class="image1" :src="app.inputPic" alt="输入图片" /> -->
                <!-- <img class="image2" :src="app.outputPic" alt="输出图片" /> -->
              </div>
              <div class="appname">
                {{ app.name }}
              </div>

            </div>
          </div>
        </div>
        <div class="line flex">
          <div class="left w-230">

            <div class="text-2xl px-2">
              优秀作品
            </div>
            <div class="genpics flex flex-wrap ">
              <div class="workinfoitem" v-for="(work, index) in workinfos" :key="work?.id">
                <PublicCptWorkInfoItem :workInfo="work" :width="280" :showAuthor="true" :showEditMenu="false"
                  :showFavorMenu="true" @downloadImage="downloadImage">
                </PublicCptWorkInfoItem>

              </div>
            </div>
            <div class="more relative flex justify-center m-4" v-if="hasMore" @click="getMore">
              <el-button type="primary">加载更多</el-button>
            </div>
          </div>

          <div class="right p-l-10 p-t-20">
            <div class="btn-goapp  " @click="goAppDetail">
              进入应用
            </div>
            <div class="intro p-t-2">
              <!-- <img :src="activeApp?.appIntro" class="w-70" alt="" srcset=""> -->
              <el-image class="w-70" :src="activeApp?.appIntro" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                :preview-src-list="[activeApp?.appIntro]" :initial-index="4" fit="cover" @click="handleImagePreview" />
            </div>

          </div>
        </div>

      </div>

    </div>
  </div>
</template>
<script lang="ts" setup>
  import { postAIMyWorkflowLogs, postAIPublicWorkInfoPage } from '../../service/yapi';
  import { useAppStore } from "~/stores/app";
  import PublicCptWorkInfoItem from '~/components/public/CptWorkInfoItem.vue';

  let app = useAppStore();
  let { downloadByUrl } = app;
  let downloadImage = (workInfo: any) => {
    downloadByUrl({ url: workInfo?.fileUrl, id: workInfo?.id, name: workInfo?.name });
  }
  let apps = ref([

    // { workflowId: 11, inputPic: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/11/1726532497469-9vch645r2.png", outputPic: "http://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/1/3f66dea3-69f4-4aaa-802c-893dfec0c58d.png", appId: 1, name: "3D手办风格", version: "2024-09-04", type: "img2img", appIntro: "https://cdn.codinghou.cn/coding/pc-ai/icons/app1.jpg" },
    {
      workflowId: 11,
      inputPic: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/11/1727687694454-ol2zf0ay6.png",
      outputPic: "http://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/1/7a8b89d8-88ea-45dd-959f-3c17a1fed724.png",
      appIntro: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/workflows/app11.jpg",
      appId: 1, name: "迪士尼风格", version: "2024-09-04", type: "img2img",
    },
    // {
    //   workflowId: 12,
    //   inputPic: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/workflows/app12/app12-1.png",
    //   outputPic: "http://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/1/9b9e9ac3-f74e-4b1b-8850-9491039782a5.png",
    //   appIntro: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/workflows/app12.jpg",
    //   appId: 2, name: "国庆海报", version: "2024-10-03", type: "img2img",
    // },
    // {
    //   workflowId: 13,
    //   inputPic: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/13/1728375161122-fsnuzesky.png",
    //   outputPic: "http://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/1/49c987f2-d7b2-401d-9f0f-f22e6d9f0e51.png",
    //   appIntro: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/workflows/app12.jpg",
    //   appId: 3, name: "3D手办", version: "2024-10-08", type: "img2img",
    // },
    {
      workflowId: 15,
      inputPic: "http://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/1/8036ba5c-def0-4d61-8076-df799f2c63f9.png",
      outputPic: "http://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/1/7d96cffb-3d03-4444-8eaa-1379fe91b02f.png",
      appIntro: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/workflows/app15/app15cover.png",
      appId: 4, name: "古诗词", version: "2024-10-12", type: "text2img",
    },
    // {
    //   workflowId: 23,
    //   inputPic: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/13/1728375161122-fsnuzesky.png",
    //   outputPic: "http://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/1/3abf1776-4da3-438e-b7ce-41677988b783.png",
    //   appIntro: "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/workflows/app12.jpg",
    //   appId: 5, name: "简笔画", version: "2024-10-12", type: "text2img",
    // },
  ])
  let activeAppId = ref(11)
  let activeApp = computed(() => {
    let match = apps.value.find((app: any) => app.workflowId == activeAppId.value)
    return match || {}

  })
  let handleImagePreview = () => {
    nextTick(() => {
      // 获取遮罩层dom
      let domImageMask = document.querySelector('.el-image-viewer__mask')
      if (!domImageMask) {
        return
      }
      domImageMask.addEventListener('click', () => {
        // 点击遮罩层时调用关闭按钮的 click 事件
        // @ts-ignore
        document.querySelector('.el-image-viewer__close').click()
      })
    })
  }
  let workinfos = ref<any>([])
  let pagination = ref({
    total: 0,
    page: 1,
    size: 10
  });
  function resetPagination() {
    pagination.value = {
      total: 0,
      page: 1,
      size: 10
    };
    workinfos.value = []
  }
  let hasMore = computed(() => {
    return pagination.value.total >= pagination.value.page * pagination.value.size;
  });
  let router = useRouter()
  let goAppDetail = () => {
    let { workflowId } = activeApp.value
    router.push(`/apps/${workflowId}`)
  }
  let goIllustration = () => {

    router.push(`/illustration`)
  }
  let changeApp = async (workflowId: any) => {
    activeAppId.value = workflowId
    resetPagination()
    getPublicWorkinfos()
  }
  let getPublicWorkinfos = async () => {
    let res: any = await postAIPublicWorkInfoPage({
      workflowId: activeApp.value.workflowId,
      isRecommend: 1,
      page: pagination.value.page,
      size: pagination.value.size
    })

    if (res.code == 1000) {
      let { list, pagination: paginationRes } = res.data;
      pagination.value = paginationRes
      workinfos.value = list
    } else {
      ElMessage.warning(res.message)
    }


  }
  onMounted(() => {
    getPublicWorkinfos()
  })
  function getMore() {
    let { total, page, size } = pagination.value;

    if (page * size < total) {
      pagination.value.page = page + 1;
      getPublicWorkinfos();
    } else {
      ElMessage.warning("没有更多啦，快去创作吧");
    }
  }
  definePageMeta({ auth: false });

</script>
<style lang="scss">
  .page-apps-index {
    .banner {
      height: 200px;
      background: url('https://cdn.codinghou.cn/coding/pc-ai/icons/AI-banner6.jpg') no-repeat center center;
      background-size: auto 100%;
    }

    .apps {
      @apply flex flex-wrap gap-2;

      .app {
        border-radius: 10px;
        filter: grayscale(30%);
        opacity: .7;

        &:hover,
        &.active {
          background: linear-gradient(180deg, #53BCD8 0%, #CEF6FF 100%);
          filter: grayscale(0%);
          opacity: 1;

          .appname {
            background: linear-gradient(180deg, #CEF6FF 0%, #53BCD8 100%);
          }
        }

        @apply w-60 p-2 box-border overflow-hidden relative;

        .pics {
          @apply flex box-border;

          .image1 {
            border-radius: 10px 0 0 10px;
          }

          .image2 {
            border-radius: 0 10px 10px 0;
          }

          img {
            @apply flex-1 block w-1/2 h-full box-border;
          }
        }

        .appname {
          z-index: 100;
          left: 50%;
          top: 50%;
          background: #F3F4F9;

          // margin-left: -25%;
          // margin-top: -25%;
          transform: translateX(-50%) translateY(-50%);
          border-radius: 10px;
          @apply text-center text-lg font-bold absolute p-2;
        }
      }
    }


    // AI-banner1
    .btn-goapp {
      background: linear-gradient(180deg, #19E8E0 0%, #2974F6 92%, #2974F6 100%), #FFFFFF;
      line-height: 32px;
      height: 32px;
      @apply w-30 text-center text-white rounded-md cursor-pointer;
    }
  }
</style>